<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="../css/inndex.css">
    <link rel="stylesheet" href="../font/iconfont.css">
</head>
<body>
    <header class="header">
      <div class="logo">
         <img src="http://www.fiyta.com.cn/dist/images/logo.png" alt="">
          </div>
          <div class="top">
              <ul class="list">
                  <li>快速选表</li>
                  <li>男士腕表</li>
                  <li>女士腕表</li>
                  <li>情侣腕表</li>
                  <li>关于品牌</li>
                  <li>客户服务</li>
              </ul>
              <ul class="list1">
                <li><i class="iconfont icon-denglu"></i></li>
                <li><i class="iconfont icon-gouwuche"></i></li>
                <li><i class="iconfont icon-sousuo"></i></li>
            </ul>
          </div>
  </header>
  <div class="login-container">
      <div class="login-wrapper">
          <div class="login-ban">
            <img src="http://www.fiyta.com.cn/dist/images/banlogin.png" alt="">
          </div>
          <div class="login-form">
            <h1>账号登录</h1>
            <form action="javascript:void(0)">
                <p>账号 : <input id="username" required type="text" name="username"></p>
                <p>密码 : <input id="password" required type="password" name="password"></p>
                <button id="login">登录</button>
          </form>
          <script>
               // 事件驱动发起请求 :
               var login_btn    = document.getElementById("login");
                    var username_ele = document.getElementById("username");
                    var password_ele = document.getElementById("password");
        
                    login_btn.onclick = function(){
                          // 拼接符合urlencoded规则的数据字符串; 
                          var data = "username="+username_ele.value + "&password=" + password_ele.value;
                          
                          // 发送post请求; 
                          var xhr = new XMLHttpRequest();
                          xhr.open("POST", "./01_login.php")
                          xhr.setRequestHeader("content-type" , "application/x-www-form-urlencoded");
                          xhr.send( data );
                          // 接受响应 : 
        
                          xhr.onreadystatechange = function(){
                                if( xhr.readyState === 4 && xhr.status === 200 ){     
                                      console.log(xhr.responseText);
                                }
                          }
                    }
          </script>
          </div>
      </div>
  </div>
</body>
</html>